<template>  
  <div :class="isshow?'boxconditionWarp':'conditionWarp_seachCaseName'" :style="{width:isshow?'100%':''}">
    <div class="seach_input">
    <div class="seach_title" style="padding-top:0px;" v-if="isshow==null">
     请输入：
    </div>
      <Input 
        v-model="seach_text" 
        :placeholder = "parltext" 
        @on-change = "handleSeach"
        @on-focus = "focusSeach"
        @on-blur = "blurSeachCaseName"
        ></Input>
    </div>
    <div :class="isshow?'seach_downed':'seach_down'"  v-show="modal_down && caseList && caseList.length>0">
      <ul v-if="caseList && caseList.length>0">
        <li v-for="(item,index) in caseList" :key="index" @click="handleItemClick(item)">
          <div class="seach_down_item" :title="item.nameInfo">
            {{ item.nameInfo }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'

export default {
  data () {
    return {
      seach_text: '',
      seach_textBackUp: '',
      seach_textBackUp2: '',
      resultObj: {},
      caseList: [],
      modal_down: false,
    }
  },
  props: {
      apiUrl:{
        type:String
      },
      isUrl:{
        type:String
      },
      parltext:{
        type:String
      },
      isshow:{
        type:String
      }
  },
  methods:{
    init(){
      var that = this;

      that.resetInit();
    },
    resetInit(){
      var that = this;
      that.seach_text = '';
      that.seach_textBackUp = '';
      that.seach_textBackUp2 = '';
    },
    handleSeach() {
      var that = this;
      if(that.seach_textBackUp != that.seach_text){
        that.resultObj = {}
        that.seach_textBackUp = that.seach_text;
        that.getList();
      }
    },
    focusSeach() {
      var that = this;
      that.modal_down = true;
      that.seach_textBackUp2 = that.seach_text;
    },
    blurSeachCaseName() {
      var that = this;
      setTimeout(function() {
        that.modal_down = false;
        if(that.seach_textBackUp2 != that.seach_text){
          that.$emit('handleSeachCaseName',that.seach_text,'');
        }
      }, 200);
    },

    handleItemClick(obj) {
      var that = this;
      that.seach_text = obj.nameInfo;
      that.seach_textBackUp = that.seach_text;
      that.seach_textBackUp2 = that.seach_text;
      that.resultObj = obj.nameInfo;
      setTimeout(function() {
        that.getList();
      }, 200);
      that.$emit('handleSeachCaseName',that.resultObj,obj.id);
    },
    getList() {
      var that = this;
      that.caseList = [];
      var restApi = this.apiUrl;
      var paramObj = this.$route.query;
      var formId=""
      if (paramObj.flage == 'add') {
           formId = Helper.get("formId")
      }
      if (paramObj.flage == 'edit'||paramObj.flage == 'view') {
           formId = paramObj.id
      }
      if(this.isUrl=="jingbian"){
         
          var parms = {
            "buildingAlias": that.seach_text,
            "buildingId":formId,
            "type":1,
          }
      }
      if(this.isUrl=="huxing"){
          var parms = {
            "houseTypeName": that.seach_text,
            "buildingId":formId
          }

      }

      if(this.isUrl=="yushou"){
          var parms = {
            "certificateNo": that.seach_text,
            "buildingId":formId
          }

      }
      if(this.isUrl=="dongtai"){
          var parms = {
            "title": that.seach_text,
            "buildingId":formId
          }

      }
      if(this.isUrl=="loupandongtai"){
          var parms = {
            "title": that.seach_text,
            "buildingId":formId
          }

      }
      if(this.isUrl=="youhuixinxi"){
          var parms = {
            "title": that.seach_text,
            "buildingId":formId
          }

      }
      if(this.isUrl=="author"){
          var parms = {
            "authorName": that.seach_text,
          }

      }
      if(this.isUrl=="advertName"){
          var parms = {
            "advertName": that.seach_text,
          }

      }
      if(this.isUrl=="loupanbiaoshi"){
          var parms = {
            "buildingAlias": that.seach_text,
          }

      }
      if(this.isUrl=="link"){
          var parms = {
            "siteName": that.seach_text,
          }

      }
      if(this.isUrl=="hotSearch"){
          var parms = {
            "cityName": that.seach_text,
          }

      }
      if(this.isUrl=="guize"){
          var parms = {
            "ruleName": that.seach_text,
            "buildingId":formId
          }

      }
      
      Rest.get(restApi,parms).done(function(res) {
        if (Helper.isSuccess(res)) {
          // console.log(res)
          if (res.data.list) {
            if(that.isUrl=="jingbian"){
                var list = res.data.list
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].buildingAlias
                }
                that.caseList = list;
            }
            if(that.isUrl=="huxing"){
                var list = res.data.list
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].houseTypeName
                }
                that.caseList = list;
            }

            if(that.isUrl=="yushou"){
                var list = res.data.list
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].certificateNo
                }
                that.caseList = list;
            }

            if(that.isUrl=="dongtai"){
                var list = res.data.list
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].title
                }
                that.caseList = list;
            }
            if(that.isUrl=="loupandongtai"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].title
                }
                that.caseList = list;
            }

            if(that.isUrl=="youhuixinxi"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].title
                }
                that.caseList = list;
            }

            if(that.isUrl=="author"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].authorName
                }
                that.caseList = list;
            }
            if(that.isUrl=="advertName"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].advertName
                }
                that.caseList = list;
            }

            if(that.isUrl=="loupanbiaoshi"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].buildingAlias
                }
                that.caseList = list;
            }

            if(that.isUrl=="link"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].sitename
                }
                that.caseList = list;
            }

            if(that.isUrl=="hotSearch"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].cityName
                }
                that.caseList = list;
            }

            if(that.isUrl=="guize"){
                var list = res.data.list
                // console.log(list)
                for(let i=0;i<list.length;i++) {
                    list[i].nameInfo = list[i].ruleName
                }
                that.caseList = list;
            }
            
          } 
        } else {
          that.$Message.error(res.status.msg);
        }
      });
    },
    warpClick() {}
  },
  created() {
    this.init();
     this.seach_text = ""
  },
  activated() {
     this.seach_text = ""
    // this.init();
  },
}
</script>

<style lang="scss" scoped>
  @import "../../assets/sass/install";
  .conditionWarp_seachCaseName,.boxconditionWarp{
    display: inline-block;
    width: 281px;
    height: 32px;
    color: #657180;
    position: relative;
    .ivu-select {
      .ivu-select-selection {
        padding-left:10px;
      }
    }
    .seach_input{
      position: relative;
      .seach_title{
        cursor: pointer;
        display: inline-block;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100px;
        height: 32px;
        font-size: 14px;
        color: #ccc;
        vertical-align: top;
        padding-left: 7px;
        padding-top: 5px;
        text-align: left;
        color: #657180;
        &:hover{
          .seach_title-down{
            display:inline-block;
          }
          .ivu-select-arrow{
            transform: rotate(180deg);
          }
        };
        .seach_title-down{
          display: none;
          font-size: 13px;
          width: 100px;
        }
      }
    }
    .seach_title-down,.seach_down{
      position: absolute;
      top: 42px !important ;
      left: 70px !important ;
      @include transition(500ms);
      @include radius(3px);
      @include overflowCss();
      max-height: 380px;
      width: 180px;
      overflow: auto;
      overflow-x: hidden;
      padding: 5px 0px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      &>ul{
        font-size: 0;
        &>li{
          font-size: 0;
        }
      }
      .seach_down_item{
        padding: 7px 16px;
        font-size: 13px;
        line-height: normal;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        &.active{
          background-color: #02b0f0;
          color: #fff;
          &:hover{
            background-color: #02b0f0;
            color: #fff;
          }
        }
        &:hover{
          background-color: #f3f3f3;
        }
      }
      .seach_nodata{
        text-align: center;
        color: #999;
        font-size: 13px;
        padding: 5px 0;
      }
    }
    .seach_title-down,.seach_downed{
      position: absolute;
      top: 42px !important ;
      left: 0px !important ;
      @include transition(500ms);
      @include radius(3px);
      @include overflowCss();
      max-height: 380px;
      width: 180px;
      overflow: auto;
      overflow-x: hidden;
      padding: 5px 0px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      &>ul{
        font-size: 0;
        &>li{
          font-size: 0;
        }
      }
      .seach_down_item{
        padding: 7px 16px;
        font-size: 13px;
        line-height: normal;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        &.active{
          background-color: #02b0f0;
          color: #fff;
          &:hover{
            background-color: #02b0f0;
            color: #fff;
          }
        }
        &:hover{
          background-color: #f3f3f3;
        }
      }
      .seach_nodata{
        text-align: center;
        color: #999;
        font-size: 13px;
        padding: 5px 0;
      }
    }
    .seach_down{
      left: 101px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #999; opacity:1; 
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #999;opacity:1;
    }

    input:-ms-input-placeholder{
        color: #999;opacity:1;
    }

    input::-webkit-input-placeholder{
        color: #999;opacity:1;
    }
    .ivu-input-wrapper{
      .ivu-input{
        padding-left: 10px !important;
      }
    }
  }
  
</style>
